<template>
   <!-- vip上方会员信息 -->
   
     <!-- 中间分类信息 -->
     <el-card shadow="never" style="margin-top:10px;">
        <div class="categoryContainer" :class="cate==true?'fold':''" lazy>
           <el-row class="category" :gutter="20"  v-for="(Catetitle,index) in categorySlive.LiveCateList" :key="index">
               <el-col class="categoryTitle" :span="2">{{Catetitle.label}}:</el-col>
               <el-col class="categoryList" :span="22" >
                   <div class="select-item" :class=" CatLight.includes(item.id) ? 'active-cate':''" @click="handlerCateItem(Catetitle.name,item.id)" v-for="(item,index) in Catetitle.choises" :key="item.id">{{item.name}}</div>
               </el-col>
           </el-row>
           <!-- 日历 -->
           <!-- <el-row class="category" :gutter="20">
               <el-col class="categoryTitle" :span="2">兴趣爱好:</el-col>
               <el-col class="categoryList" :span="22">
                
          <el-date-picker v-model="timer"  type="daterange" range-separator="-" start-placeholder="开始日期"
         end-placeholder="结束日期" size="small" />
               </el-col>
           </el-row> -->
       </div>         
        <p class="shensuo" @click="handleCateFlex">
           <span>{{cate==true?'展开全部':'收起'}}</span>
        </p>
 </el-card>
  <!-- 控制视频排序nav -->
  <el-card shadow="never" style="margin-top: 10px; margin-bottom: 10px; height: 70px;">
           <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#f93684"
               style="font-size:14px; margin-top: -12px; border-bottom:none !important;" @select="handleSelect">
               <el-menu-item :class="naVideo==1?'light':''" index="1" v-if="naVideo==1">综合销量</el-menu-item>
               <el-menu-item index="1" v-else @click="zongHandler">综合</el-menu-item> 

               <el-menu-item index="2" :class="naVideo==2?'light':''"  v-if="naVideo==2">销量从高到低</el-menu-item>   
               <el-menu-item index="2" v-else @click="Sale">销量</el-menu-item>

               <!-- <el-menu-item index="3" :class="naVideo==3?'light':''"  v-if="naVideo==3">评价从高到低</el-menu-item>   
               <el-menu-item index="3" v-else @click="Commit">评价</el-menu-item> -->


               <el-menu-item index="4" :class="naVideo==4?'light':''"  v-if="naVideo==4">浏览量由高到低</el-menu-item>
               <el-menu-item index="4" v-else     @click="glanceHand">浏览量</el-menu-item>
               
               <el-sub-menu index="5">
                   <template #title >价格</template>
                   <el-menu-item index="5-1" @click="priceTop_lod">价格由高到低</el-menu-item>
                   <el-menu-item index="5-2" @click="priceLod_top">价格由低到高</el-menu-item>

               </el-sub-menu>
               <el-menu-item index="6" :class="naVideo==6?'light':''" v-if="naVideo==6">开课时间由远及近</el-menu-item>
               <el-menu-item index="6" v-else @click="createTime">开课时间</el-menu-item>
           </el-menu>
       </el-card>
       <!-- 视频内容 -->
       <div class="card_content_wrapper">
           <div class="loadMoreList"  >
               <div class="content_card_item"   v-for="(video,index) in categorySlive.Content0" :key="video.id">
                   <!-- 视频内容 -->
                   <div class="card_item">
                       <!-- 视频图片 -->
                       <div class="card-top">
                           <img class="cover" :src="video.cover" alt="">
                           <!-- 播放按钮 -->
                           <img class="play" src="./imgs/4d.png" alt="">
                           <span>视频课</span>
                       </div>
                       <div class="card-bottom">
                           <div class="card-bottom-top">
                               <div class="video-text">
                                   <span>{{video.title}}</span>
                               </div>
                               <div class="price-zan">
                                   <span class="price">￥{{video.moreBackup.price}}</span>
                                   <span class="zan">{{Math.ceil(video.maxP * 1000)}}人点赞</span>
                               </div>
                               <div class="vip-video">
                                   <img src="./imgs/vip_free@3x.png" alt="">
                               </div>
                               <div class="myZan">
                                   <svg t="1666139214246" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4652" width="14" height="14"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="4653"></path></svg>
                                   <span>{{video.favorableValue}}</span>
                                   <svg t="1666139352255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5643" width="14" height="14"><path d="M622.56056 464.834794c0 27.928073 22.73684 50.64854 50.664913 50.64854 27.956725 0 50.693566-22.720468 50.693566-50.64854 0-27.928073-22.73684-50.66389-50.693566-50.66389C645.2974 414.171927 622.56056 436.907745 622.56056 464.834794" p-id="5644"></path><path d="M931.254178 211.459063c0-40.637536-33.05893-73.698512-73.728188-73.698512L166.471964 137.76055c-40.637536 0-73.727165 33.059953-73.727165 73.698512l0 506.796488c0 40.637536 33.088606 73.696466 73.727165 73.696466l251.16846 0 94.343715 94.28641 94.315062-94.28641 251.226788 0c40.669258 0 73.728188-33.05893 73.728188-73.696466l0-82.560344-0.089028-1.282203L931.254178 211.459063zM875.96699 695.220928c0 22.88522-18.558681 41.444924-41.443901 41.444924L579.446623 736.665853l-67.462484 67.490114-67.430762-67.490114L189.506587 736.665853c-22.88522 0-41.4746-18.559705-41.4746-41.444924L148.031986 234.493685c0-22.88522 18.58938-41.488927 41.4746-41.488927l645.01548 0c22.88522 0 41.443901 18.603707 41.443901 41.488927l0 396.579247 0 36.161594L875.965967 695.220928z" p-id="5645"></path><path d="M461.321272 464.834794c0 27.928073 22.735817 50.64854 50.662867 50.64854 27.929096 0 50.66389-22.720468 50.66389-50.64854 0-27.928073-22.734794-50.66389-50.66389-50.66389C484.057089 414.171927 461.321272 436.907745 461.321272 464.834794" p-id="5646"></path><path d="M300.083008 464.834794c0 27.928073 22.735817 50.64854 50.66389 50.64854 27.927049 0 50.662867-22.720468 50.662867-50.64854 0-27.928073-22.735817-50.66389-50.662867-50.66389C322.817802 414.171927 300.083008 436.907745 300.083008 464.834794" p-id="5647"></path></svg>
                                   <span>15</span>
                                   <svg t="1666139387021" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6647" width="14" height="14"><path d="M512 150.25664c7.1424 0 20.224 2.2272 27.59168 17.152l81.24416 164.61312a82.0224 82.0224 0 0 0 61.78816 44.91264l181.69344 26.40384c16.46592 2.39104 22.6304 14.14656 24.83712 20.9408 2.20672 6.79424 4.13184 19.92192-7.7824 31.5392l-131.48672 128.16384a82.03776 82.03776 0 0 0-23.58272 72.61184l31.03744 180.96128c1.6128 9.41568-0.54272 17.72032-6.40512 24.6784-6.08256 7.21408-15.01696 11.52-23.90016 11.52-4.83328 0-9.5232-1.2288-14.336-3.7632l-162.49856-85.43232a82.35008 82.35008 0 0 0-38.19008-9.43104c-13.25056 0-26.45504 3.26144-38.17984 9.42592L311.31648 869.9904c-4.75136 2.49856-9.5744 3.7632-14.336 3.7632-8.88832 0-17.8176-4.30592-23.90016-11.51488-5.8624-6.95808-8.01792-15.26272-6.40512-24.6784l31.03744-180.95104a82.03264 82.03264 0 0 0-23.59808-72.6272l-131.4816-128.16896c-11.91424-11.61728-9.99424-24.74496-7.7824-31.5392 2.20672-6.79424 8.36608-18.54464 24.83712-20.9408l181.69344-26.39872a81.9968 81.9968 0 0 0 61.7728-44.88192l81.25952-164.64384c7.36256-14.9248 20.44416-17.152 27.58656-17.152m0-71.79264c-36.57728 0-73.15968 19.05664-91.96544 57.16992L338.77504 300.27776a10.25536 10.25536 0 0 1-7.72096 5.61152L149.36064 332.288c-84.11648 12.22144-117.7088 115.59936-56.83712 174.92992l131.47648 128.15872c2.41664 2.3552 3.52256 5.74976 2.94912 9.07776l-31.03744 180.96128c-11.37152 66.29376 41.30304 120.12032 101.06368 120.12032 15.76448 0 32.04096-3.75296 47.744-12.0064l162.51392-85.43744a10.28096 10.28096 0 0 1 9.54368 0l162.51392 85.43744c15.70816 8.25856 31.96928 12.0064 47.744 12.0064 59.75552 0 112.43008-53.8368 101.06368-120.12032l-31.03744-180.96128a10.26048 10.26048 0 0 1 2.94912-9.07776l131.47648-128.15872c60.87168-59.33056 27.27936-162.70848-56.83712-174.92992l-181.69344-26.40384a10.25536 10.25536 0 0 1-7.72096-5.61152L603.97568 135.6288c-18.816-38.10816-55.3984-57.1648-91.97568-57.1648z" fill="#666666" p-id="6648"></path></svg>
                                   <span>20</span>
                               </div>
                           </div>
                           <div class="card-bottom-don">
                               <div class="botton-text">
                                    <img class="userAva" :src="video.creatorBackup.avatar" alt="">
                                    <span>{{video.creatorBackup.name}}</span>
                                    <img src="" alt="">
                               </div>
                               <div class="date">{{dayjs(video.createTime).format('YY-MM-DD')}}</div>
                           </div>
                       </div>
                   </div>
                   <!---->
                   <!---->
               </div>
           </div>
            <!-- 加载更多-->
            <div class="load_more_btn_wrapper" style="">
                   <span  @click="load" v-if="categorySlive.videoLength!=categorySlive.totalVideoLe"  class="load_more_btn" style="">加载更多</span>
                   <div  style="color: rgb(204, 204, 204); text-align: center; padding-top: 20px; display: none;">—
                       没有更多内容啦 —
                   </div>
               </div>
       </div>
   
</template>

<script setup lang="ts">
import categoryLive from "../../store/course/liveCourse"
import dayjs from "dayjs"
import { ElLoading } from 'element-plus'
import { ref,onMounted, nextTick ,watch} from "vue"
import { ElMessage } from 'element-plus'
import {useRouter,useRoute} from "vue-router"


let categorySlive = categoryLive()
let route = useRoute()



// 收集发请求需要的数据
// 一页多少数据
let pageSize = ref<number>(20)
// 当前页
let pageNum = ref<number>(0)

onMounted(async () => {   
   console.log(categorySlive);
   
       // 挂载的时候请求分类数据
 await categorySlive.getLiveCate() 
   nextTick(()=>{
  
//   挂载的时候请求一次视频数据
categorySlive.getLiveCourse(pageSize.value,pageNum.value,{})

   }) 
})
watch(()=>route.path,()=>{
   console.log(11);
   
})
// 控制视频高亮标识
let naVideo = ref<number>(1)

// 存储选择的内容参数
let filterInfo = ref([])
let params = ref({
   filterCode:'',
   filterValue:[]
  },
)
// 分类信息高亮标志位
let CatLight = ref([])
// 定义标志位，对分类信息进行展开和收起
let cate = ref(true)
// 收集时间数据
let timer = ref([])
// 控制展开和收起的回调
const handleCateFlex = ()=>{
   cate.value = !cate.value
}
// 加载更多
const load = ()=>{
   const loading = ElLoading.service({
   lock: true,
   text: '加载中',
   background: 'rgba(255, 255, 255, 0.8)',
   
 })


   categorySlive.getLiveCourse(pageSize.value,pageNum.value + 1,{filterInfo:filterInfo.value})
    nextTick(()=>{
  
   setTimeout(() => {
   loading.close()
       //将第一页数据合并和剩下页数据合并
    categorySlive.Content0.push.apply(categorySlive.Content0,categorySlive.ContenF)
 }, 1000)
    })
   
   
}


// 点击分类的内容 ClassName  ClasItem [id]
const handlerCateItem = (ClassName,ClasItem)=>{
   /* 
     ClassName--点击的大类别名
     ClasItem---点击的具体内容
   */
 

   // 上来直接去判断大数组中有没有类别名字
  const item =  filterInfo.value.find(item=> item.filterCode==ClassName);
// 没有就将数据加进去
   if(!item){
      
       let arr = [];
       arr.push(ClasItem);
       filterInfo.value.push({filterCode:ClassName,filterValue:arr})
       // 高亮显示
       CatLight.value.push(ClasItem) 
       // 发请求
       categorySlive.getLiveCourse(pageSize.value,pageNum.value,{filterInfo:filterInfo.value})
       // console.log(filterInfo.value)  //=======
       return;
   }
//   有就判断一下里里面点击同类别的数组长度是否大于3个
  if(item?.filterValue?.length >= 3){
   
   let repeat =  item.filterValue.find(item => item === ClasItem);
  if(repeat){
   // 查找索引重复元素索引--删除元素
   let index = item.filterValue.indexOf(repeat)
   //删除元素
      item.filterValue.splice(index,1)
   // 取消高亮
   CatLight.value.splice(index,1)
   // 发请求
   categorySlive.getLiveCourse(pageSize.value,pageNum.value,{filterInfo:filterInfo.value})
   //    console.log(filterInfo.value); //========
      return
  }
    ElMessage.warning('同种类别只能选择三个选项')
       return;
  }
//如果小于三个，判断已经有的是否重复-重复就删除掉，
// filter取反，返回不重复的，将不重复的从新压入
  let repeat =  item.filterValue.find(item => item === ClasItem);
  if(repeat){
   // 如果长度小于3--判断点击的是不是同一个
   // 查找索引重复元素索引--删除元素
   
   let index = item.filterValue.indexOf(repeat)
      item.filterValue.splice(index,1)
      // 取消高亮
      CatLight.value.splice(index,1)
   // 发请求
   categorySlive.getLiveCourse(pageSize.value,pageNum.value,{filterInfo:filterInfo.value})
   //    console.log(filterInfo.value); //=====
      return
  }
//不重复就继续加进去--点击的内容
  item.filterValue.push(ClasItem);
   // 高亮显示
   CatLight.value.push(ClasItem) 
       // 发请求
       categorySlive.getLiveCourse(pageSize.value,pageNum.value,{filterInfo:filterInfo.value})
//console.log(filterInfo.value) //=======
  

  
}
// 点击综合
const zongHandler = ()=>{
   // 0是综合高亮
   naVideo.value = 0
   // 发送请求
   categorySlive.getLiveCourse(pageSize.value,pageNum.value,{})
}
// 点击销量
const Sale =()=>{
 naVideo.value = 2
// 发送销量请求
categorySlive.getSale(pageSize.value,pageNum.value)
}
// 点击浏览量
const glanceHand = ()=>{
 naVideo.value = 4
 categorySlive.getGlance(pageSize.value,pageNum.value)
}
// 点击高到低价格
const priceTop_lod = ()=>{
   categorySlive.getLod_top(pageSize.value,pageNum.value)
}
// 点击价格低到高
const priceLod_top =()=>{
   categorySlive.getLod_top(pageSize.value,pageNum.value)
}
// 点击发布时间
const createTime = ()=>{
   naVideo.value = 6
   categorySlive.getTime(pageSize.value,pageNum.value)
}

</script>

<style scoped>
/* 版心 */
.main {
   width: 1200px;
   height: 10000px;
   margin: 0 auto;
   margin-top: 15px;


}

/* vip导航 */
.topVip {}

.vipMain {
   display: flex;
   height: 70px;
}

.vipItem {
   width: 390px;
   margin-left: 30px;

   display: flex;
   align-items: center;
}

.vip {
   margin-right: 10px;
   width: 50px;
   height: 50px;
}

.vipItem .vipNum {
   padding-top: 4px;
   font-size: 16px;

}

.vipItem .viptext {
   margin-top: 8px;
   font-size: 12px;
   color: #f93684;
}
.right p{
   font-size: 16px;
   text-align: center;
}
.right p i{
   color: #f93684;
}
/* 最右侧开通vip */
.right button {
   width: 80px;
   height: 32px;
   background: rgb(252, 59, 130);
   border: none;
   color: white;
   border-radius: 20px;
   display: block;
   margin-bottom: 8px;
}

.right .openVip {
   color: #7d8090;
   font-size: 12px;
}

.vipO {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.user .vip{
   border-radius: 50%;
}
</style>
<style scoped>
/* 视频 */
.card_content_wrapper {
   margin-top: 20px;
   padding-bottom: 20px;
}
.light{
   color: #f93684;
}
.card_content_wrapper .loadMoreList {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   margin-left: auto;
   margin-right: auto;
}

.content_card_item {
   /* border: solid 1px red; */
   padding: 0 8px;
   box-sizing: border-box;
   border-radius: 4px;
}

.card_item {
   display: flex;
   box-sizing: border-box;
   flex-direction: column;
   width: 224px;
   height: 300px;
   margin-bottom: 20px;
   background-color: #fff;
   border-radius: 4px;
}

.card-top {
   width: 100%;
   height: 126px;
   position: relative;
   /* border-radius: 4px; */
}

.card-top .cover {
   width: 100%;
   height: 100%;
   border-radius: 4px;
}
/* 鼠标滑过视频图片 */
.card-top .cover:hover{
   opacity: .6;
}
.play {
   position: absolute;
   top: 80px;
   left: 15px;
   display: inline-block;
   width: 30px;
   height: 30px;
}

.card-top span {
   position: absolute;
   color: #fff;
   top: 82px;
   right: 10px;
   font-size: 12px;
   height: 24px;
   line-height: 24px;
   padding: 0 10px;
   border-radius: 12px;
   background: rgba(0, 0, 0, .6);
}

.card-bottom {
   width: 100%;

}

.card-bottom-top {
   width: 100%;
   height: 125px;
   display: flex;
   padding: 0px 6px;
   box-sizing: border-box;
   flex-direction: column;
   border-bottom:1px solid #b1b5c1 ;
}

.video-text {
   font-size: 14px;
   color: #111;
   padding-top: 10px;
   /* padding-bottom: 0; */
   line-height: 18px;
   height: 45px;
   /* 两行出现省略号 */
   box-sizing: border-box;
   
}
.video-text span{
   display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /** 多行文本溢出...*/
  overflow: hidden;
}
.price-zan {
   display: flex;
   justify-content: space-between;
   align-items: center;
   /* padding: 8px 6px; */
   box-sizing: border-box;
}

.price-zan span {
   display: inline-block;

}

.price-zan .price {
   color: #f93684;
   font-size: 16px;
}

.price-zan .zan {
   font-size: 12px;
   color: #b1b5c1;
}

.vip-video img {
   display: inline-block;
   width: 38px;
   height: 14px;
}
.card-bottom-don{
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.card-bottom-don .botton-text span {
   display: inline-block;
   line-height: 50px;
   font-size: 12px;
   margin-left: 8px;
}
.botton-text{
   display: flex;
   align-items: center;
   height: 50px;
   padding: 0 6px;
   box-sizing: border-box;
}
.botton-text .userAva{
   width: 24px;
   height: 24px;
   border-radius: 50%;
}
.date{
   font-size: 12px;
   color: #b1b5c1;
   padding-right:5px ;
   box-sizing: border-box;
}
.myZan{
   display: flex;
   font-size: 12px;
   align-items: center;
   height: 28px;
   margin-bottom: 20px;
}
.myZan .icon{
   margin-right: 5px;
}
.myZan span {
   display: inline-block;
   margin-right: 20px;
}
/* 加载更多 */
.load_more_btn{
   display: block;
   width: 140px;
   height: 40px;
   line-height: 40px;
   font-size: 14px;
   color: #82858e;
   border: 1px solid #eaecf0;
   border-radius: 4px;
   background: #fff;
   text-align: center;
   margin: 20px auto 0;
   cursor: pointer;
}
/* 控制视频 */
/deep/.is-active {
   background-color: white !important;
   border-bottom: none !important;
}

/deep/.el-menu-item:hover {
   background-color: white !important;
   color: #f93684 !important;
}
/* 日期框选中颜色 */
/deep/.is-active{
   --el-input-focus-border-color: #f93684;
}

/* 分类样式 */
.categoryContainer{
  overflow: hidden;
}
/* 展开和收起 */
.fold{
 height: 150px;
}
.shensuo{
   text-align: center;
   color: #f93684;
   font-size: 14px;
   margin: 20px 0 0;
}
.category {
   display: flex;
   align-items: center;
}

.categoryTitle {
   color: #b1b5c1;
   padding: 7px 0;
   font-size: 14px;
   box-sizing: border-box;
}

.categoryList {
   /* border:none; */
   /* display: flex; */
}

.select-item {
   display: inline-block;
   cursor: pointer;
   font-size: 14px;
   color: #7d8090;
   margin-right: 24px;
   margin-bottom: 10px;
   margin-top: 8px;
   padding: 7px 13px;
   border-radius: 4px;
}

.active-cate {
   background: #f93684;
   color: #fff;
}

</style>